/* Some best practices from CSS in Depth book. >>> */
:root {
	box-sizing: border-box;
/*  font-size: calc(1vw + 0.6em);
*/
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body * + * {
	margin-top: 1.5em;
}

/* Some best practices from CSS in Depth book. <<< */

body {
  font-family: Helvetica, Arial, sans-serif;
}

#topbar , #topbar > * , #imgblock {
	margin-top: 0;
}

/* Full width one-line "label & input box" CSS from: http://stackoverflow.com/a/6527129/151453
*/

.no-margin {
	margin: 0px; /* <body class="no-margin"> causes nowtime big-font display, to explain! */
}

.inputContainer {
	margin-bottom: 5px;
}
.inputContainer label {
    float: left;
    margin-left: 5px;
    margin-right: 5px;
}
.inputContainer button {
    float: right;
    margin-left: 5px;
    margin-right: 5px;
}

.inputContainer div {
    overflow: hidden;
}
.inputContainer input {
    width: 98%; /* 100% causes iPad input-box right edge trimmed. why? */
    display: block
}



input[type="text"] {
  display: block;
  margin: 0;
/*
  width: 95%;
  font-family: sans-serif;
  font-size: 18px;
*/
  appearance: none;
  box-shadow: none;
  border-radius: none;
  color: #999;
}

input[type="text"]:focus {
  outline: none;
  color: black;
}

.no-margin {
	text-align: center;
	font-size: 24px;
	margin: 0px;
}

.ip_tip {
	font-size: 12px;
	color: #bbb;
}

#qr_area {
	text-align: center;
}

#imgblock {
	text-align: center;
}


#usertext_region { 
	display: flex; 
	height: 6rem; 
}

#usertext_region > * {
	margin-top: 0;
}

.flex_btn_width { 
	position: relative;
	flex-basis: 5rem; 
}

.btn_height1 { 
	width: 100%;
	height: 2rem; 
	display: block; 
}

.btn_snap_bottom {
	position: absolute;
	bottom: 0px;
}

.btn_height2 { 
	height: 100%;
}

#chjtext { 
	margin-left: 0.5em;
	margin-right: 0.5em;
	flex-grow: 1; 
}


